<script setup>
import {ref, onMounted} from 'vue'
import {pageTakeApi,agreeTakeApi,disagreeTakeApi} from "@/api/todo/todo"
import {ElMessage} from "element-plus";

const tableData = ref({})
// 表单状态
const filterState = ref(true)
// 表单数据
const isExpand = ref(false)
const formData = ref({
  page: 1,
  size: 10,
  title: ''
})
const dateRange = ref([])//el-date-picker组件保存是数组

onMounted(() => {
  loadData()
})
//请求 查询接口
const loadData = async () => {
  console.log(11111)
  if (dateRange.value.length) {
    //赋值
    formData.value.sdate = dateRange.value[0]
    formData.value.edate = dateRange.value[1]
  }
  const r = await pageTakeApi(formData.value);
  tableData.value = r.data;
  console.log(tableData.value)
}

// 分页
const onSizeChange = (val) => {
  formData.value.size = val;
  loadData()
}
const onCurrentChange = (val) => {
  formData.value.page = val;
  loadData()
}

// 编辑
const infoRef = ref()
const onUserInfo = (row) => {
  infoRef.value.state = true
  infoRef.value.isupdate = true
  if (row) {
    infoRef.value.formData.id = row.id
    infoRef.value.formData.name = row.name
    infoRef.value.formData.eatDate = row.eatDate
    infoRef.value.formData.type = row.type
  }
}

const addUserInfo = () => {
  infoRef.value.state = true
  infoRef.value.isupdate = false
  infoRef.value.formData.id = row.id
    infoRef.value.formData.name = row.name
    infoRef.value.formData.eatDate = row.eatDate
    infoRef.value.formData.type = row.type
}

const onDelete = async (row) => {
  const r = await deleteApi({id: row.id});
  if (r.code == 0) {
    ElMessage.success("删除人员用餐信息成功！")
    loadData()
  } else {
    ElMessage.error(r.data)
  }
}

// 批量选择
let objs = ref([])
const onSelectionChange = (val) => {
  objs.value = val
}
const onDeleteBatch = async () => {
  var data = new Array();
  for (let i = 0; i < objs.value.length; i++) {
    data[i] = objs.value[i].id;
  }
  const r = await deleteBatchApi(data);
  if (r.code == 0) {
    //成功
    ElMessage.success("批量删除成功！")
    //重新加载请求
    loadData()
  } else {
    ElMessage.error(r.data)
  }
}
</script>


<template>
  <Box>
    <!-- 逻辑层 -->
    <Info ref="infoRef" @flush="loadData"/>
    <!-- 逻辑层 -->

    <!-- 筛选 -->
    <template #filter v-if="filterState">
      <el-form :inline="true">
        <el-form-item label="用餐信息">
          <el-input placeholder="请输入人员姓名" v-model="formData.name"/>
        </el-form-item>
        <el-form-item label="用餐日期">
          <el-date-picker
              value-format="YYYY-MM-DD"
              v-model="dateRange"
              type="daterange"
            range-separator="到"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData"> <span class="iconfont icon-sousuo"></span>搜索</el-button>
          <el-button type="default"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </template>
    <!-- 筛选 -->
    <!-- 内容 -->
    <!-- 按钮组 -->
    <el-row>
      <el-col :span="12">
        <el-button type="primary" @click="addUserInfo()">
          <span class="iconfont icon-jiahao"></span>新增
        </el-button>
        <el-button type="danger" :disabled="!objs.length" @click="onDeleteBatch">
          <span class="iconfont icon-shanchu"></span>批量删除
        </el-button>
      </el-col>

      <el-col :span="12" style="text-align: right">
        <el-button circle @click="filterState = !filterState">
          <span class="iconfont icon-sousuo"></span>
        </el-button>
        <el-button circle>
          <span class="iconfont icon-shuaxin"></span>
        </el-button>
      </el-col>
    </el-row>
    <!-- 按钮组 -->
    <!-- 表格 -->

    <el-table :data="tableData.data" :border="true" @selection-change="onSelectionChange">
      <el-table-column type="selection" align="center" fixed="left"></el-table-column>
      <el-table-column label="序号" prop="id" align="center" width="60"></el-table-column>
      <el-table-column label="人员姓名" prop="name" align="center" width="200"></el-table-column>
      <el-table-column label="用餐日期" prop="eatDate" align="center" width="150"></el-table-column>
      <el-table-column label="用餐类型" prop="type" align="center" width="200"></el-table-column>
      <el-table-column label="创建时间" prop="createTime" align="center" width="200"></el-table-column>
      <el-table-column label="操作" align="center" width="120" fixed="right">
        <template #default="scoped">
          <el-button type="primary" link size="small" @click="onVote(scoped.row)">
            <span class="iconfont icon-shanchu"></span>投票
          </el-button>
          <el-button type="primary" link size="small" @click="onUserInfo(scoped.row)">
            <span class="iconfont icon-bianji"></span>修改
          </el-button>
          <el-button type="primary" link size="small" @click="onDelete(scoped.row)">
            <span class="iconfont icon-shanchu"></span>删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 -->
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="formData.pagenum"
      v-model:page-size="formData.pagesize"
      :page-sizes="[10, 20, 30, 40]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
    />
    <!-- 分页 -->
    <!-- 内容 -->
  </Box>
</template>
../../../api/vote